<template>
  <div id="login">
    <h1>易仲裁平台管理系统</h1>
    <div class="loginInfo" @keyup.enter="submit">
      <div class="left"></div>
      <div class="right">
         <h2>用户登录</h2>
         <Form :model="formRight" label-position="right" :label-width="100">
            <FormItem label="用户名">
                <Input v-model="formRight.input1"></Input>
            </FormItem>
            <FormItem label="密码">
                <Input v-model="formRight.input2" type="password"></Input>
            </FormItem>
            <FormItem>
                <span class="btn" @click="submit">登录</span>
            </FormItem>
        </Form>
      </div>
    </div>
    
  </div>
</template>

<script>

export default {
  name: 'Login',
  data(){
    return {
      formRight: {
          input1: '',
          input2: ''
      },
      times:false
    }
  },
  methods:{
    submit(){
      if(this.formRight.input1&&this.formRight.input2){
          if(this.times) return;
          this.times = !this.times; 
          this.$http.post('/api2'+this.urls.login,{username:this.formRight.input1,password:this.formRight.input2}).then((result)=>{
                if(result.data.code===200){
                  
                  this.formRight.input1='';
                  this.formRight.input2='';
                  localStorage.setItem('roleplatname',result.data.data.roles[0].description)
                  localStorage.setItem('roleplatid',result.data.data.roles[0].role)
                  localStorage.setItem('userplatname',result.data.data.name)
                  localStorage.setItem('userplatid',result.data.data.uid)
                  this.$store.dispatch('changeRolePlatname',result.data.data.roles[0].description)
                  this.$store.dispatch('changePlatRoleid',result.data.data.roles[0].role)
                  this.$store.dispatch('changeUserPlatname',result.data.data.name)
                  this.$store.dispatch('changeUserPlatid',result.data.data.uid)
                 
                    if(result.data.data.roles&&result.data.data.roles[0].role=='financeCompany'){   //金融/平台
                        this.$Message.success('登录成功');
                        this.$router.push('/SysApplypage/Apply')
                        this.$store.commit('isShow', true)
                    }else if(result.data.data.roles&&result.data.data.roles[0].role=='admin'){   //超级管理员
                        this.$Message.success('登录成功');
                        this.$router.push('/StaticAnalysis')
                        this.$store.commit('isShow', false)
                    }else if(result.data.data.roles&&result.data.data.roles[0].role=='arbDataEntry'){   //银行录入
                        this.$Message.success('登录成功');
                        this.$router.push('/bankInsert')
                        this.$store.commit('isShow', false)
                    }else{
                      this.$Message.warning('没有权限登录');
                    }
                }else{
                  this.$Message.warning('用户名或密码有误');
                }
          })

          setTimeout(()=>{
            this.times = !this.times;
          },2000)
      }else{
        this.$Message.warning('用户名或密码不能为空');
      }
      
    }
  },
  created(){
    // var lett = this;
    
    localStorage.setItem('roleplatname','')
    localStorage.setItem('roleplatid','')
    localStorage.setItem('userplatname','')
    localStorage.setItem('userplatid','')
    this.$store.dispatch('changeRolePlatname','')
    this.$store.dispatch('changePlatRoleid','')
    this.$store.dispatch('changeUserPlatname','')
    this.$store.dispatch('changeUserPlatid','')
  }
}
</script>

<style scoped>
  #login{
    /* background: url('../assets/login.png'); */
     /* position:fixed;
      top: 0;
      left: 0;
     width:100%;
      height:100%;
      min-width: 1000px;
      z-index:-10;
      zoom: 1;  */
      height:100%;
     /* display: flex;
     align-items: center;
     -webkit-align-items:center;
     -o-align-items:center; */
     background-color: #fff;
     background: url('../assets/login.png') no-repeat;
     background-size:  100% 100%;;
     -webkit-background-size:  100% 100%;
     -o-background-size:  100% 100%;
     background-position: center 0;
  }
  h1{
    position: absolute;
    left: 50%;
    margin-top: -256px;
    top: 50%;
    margin-left: -270px;
    font-size: 60px;
  }
  h2{
    height: 120px;
    line-height: 120px;
    margin-left: 70px;
  }
  .ivu-form-item{
    margin-bottom: 46px;
  }
  .loginInfo{
    width: 980px;
    height: 490px;
    position: absolute;
    left: 50%;
    margin-left: -490px;
    top: 50%;
    margin-top: -150px;
    display: flex;
    background: #fff;
    padding: 0 60px;
    opacity: 0.8;
  }
  .left{
    /* width: 432px;
    height: 339px; */
    width: 302px;
    height: 259px;
    background: url('../assets/loginLogo.png');
    background-size: 100% 100%;
    align-self: center;
    -webkit-align-self:center;
     -o-align-self:center;
  }
  .right{
    flex: 1;
    text-align: center;
    align-self: center;
     -webkit-align-self:center;
     -o-align-self:center;
  }
  .ivu-form{
    padding: 0 100px;
  }

  .btn{
    background: #2e37cb;
    color: #fff;
    line-height: 30px;
    width: 260px;
    height: 30px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
</style>
